<div id="upgrade-mode" class="upgrade-view">

	<div id="upgrade-view" class="wrapper">
		<div class="headline">{PaymentTitle}</div>


		<div id="product-step">

			<div class="headline headline--secondary">{PaymentSelectPackage}</div>
			<table class="product-table">
			   <thead>
			      <tr>
			         <th></th>
			         <th style="text-align: center">{PaymentPackageTitle}</th>
			         <th style="text-align: center">{PaymentPriceTitle}</th>
			      </tr>
			   </thead>
			   <tbody id="product-table-body">
			   </tbody>
			</table>

			<div style="padding: 10px; 0xp;">
				<a id="next-to-payment" href="#" class="btn btn--flex">Next</a>
			</div>
		</div>

		<div id="payment-step">
			<div class="headline headline--secondary" id="back-to-product">{PaymentSelectPackage}</div>
			<div class="headline headline--secondary">{PaymentSelectPayment}</div>
			<div id="payment-container" class="upgrade-view__payment-container">
			</div>

			<div id="error_message" class="textinput__errormessage">
			</div>

			<div class="upgrade-view__payment-button-container">
				<a id="payment-button" href="#" class="btn btn--flex">{PaymentButton}</a>
			</div>

		</div>


	</div>
</div>

<div id="maintenance-mode" class="maintenance-mode">
  <i class="material-icons maintenance-mode__close" id="maintenance-mode-close-icon">close</i>
  <div class="maintenance-mode__container">
    <div class="maintenance-mode__icon"><i class="material-icons">build</i></div>
    <div id="maintenance-msg" class="maintenance-mode__message">

    </div>
  </div>
</div>
